import React, { Component,useContext, useState, useEffect, useRef} from "react";
import { Container } from "./style";
import "antd/dist/antd.css";
// import connect from './connect'
import {
  Button,
  Modal,
  Menu,
  Dropdown,
  Input,
  Table,
  Popconfirm,
  Form
} from "antd";
// @connect
// 表格
const EditableContext = React.createContext();
const EditableRow = ({ index, ...props }) => {
  const [form] = Form.useForm();
  return (
    <Form form={form} component={false}>
      <EditableContext.Provider value={form}>
        <tr {...props} />
      </EditableContext.Provider>
    </Form>
  );
};
const EditableCell = ({
  title,
  editable,
  children,
  dataIndex,
  record,
  handleSave,
  ...restProps
}) => {
  const [editing, setEditing] = useState(false);
  const inputRef = useRef();
  const form = useContext(EditableContext);
  useEffect(() => {
    if (editing) {
      inputRef.current.focus();
    }
  }, [editing]);
  const toggleEdit = () => {
    setEditing(!editing);
    form.setFieldsValue({
      [dataIndex]: record[dataIndex],
    });
  };
  const save = async (e) => {
    try {
      const values = await form.validateFields();
      toggleEdit();
      handleSave({ ...record, ...values });
    } catch (errInfo) {
      console.log('Save failed:', errInfo);
    }
  };
  let childNode = children;
  if (editable) {
    childNode = editing ? (
      <Form.Item
        style={{
          margin: 0,
        }}
        name={dataIndex}
        rules={[
          {
            required: true,
            message: `${title} is required.`,
          },
        ]}
      >
        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
      </Form.Item>
    ) : (
        <div
          className="editable-cell-value-wrap"
          style={{
            paddingRight: 24,
          }}
          onClick={toggleEdit}
        >
          {children}
        </div>
      );
  }
  return <td {...restProps}>{childNode}</td>;
};
// @connect
class index extends Component {
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: '序号',
        dataIndex: 'key',
      },
      {
        title: '所属校区',
        dataIndex: 'school',
      },
      {
        title: '仓库名称',
        dataIndex: 'Name',
      },
      {
        title: '仓库编码',
        dataIndex: 'Code',
      },
      {
        title: '负责人',
        dataIndex: 'people',
      },
      {
        title: '仓库地址',
        dataIndex: 'address',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: (text, record) =>
          this.state.dataSource.length >= 1 ? (
            <Popconfirm title="确认删除?" onConfirm={() => this.handleDelete(record.key)}>
              <a>删除</a>
              <div></div>
            </Popconfirm>

          ) : null,
      },
    ];
    // this.props.dataSource,
    this.state = {
      dataSource:
      [
        {
          key: "1",
          school: "本部高中",
          Name: "A3楼地下室",
          Code: 323472,
          people: "张俊",
          address: "GZ-A3-A3B2",
        },
        {
          key: "2",
          school: "本部初中",
          Name: "信息中心",
          Code: 422452,
          people: "陈岐",
          address: "GZ-A3-A3B2",
        },
        {
          key: "3",
          school: "本部初中",
          Name: "库房",
          Code: 321124,
          people: "熊朝丹",
          address: "GZ-A3-A3B2",
        },{
          key: "4",
          school: "本部高中",
          Name: "A3楼地下室",
          Code: 323472,
          people: "张俊",
          address: "GZ-A3-A3B2",
        },
        {
          key: "5",
          school: "本部初中",
          Name: "信息中心",
          Code: 422452,
          people: "陈岐",
          address: "GZ-A3-A3B2",
        },
        {
          key: "6",
          school: "本部初中",
          Name: "库房",
          Code: 321124,
          people: "熊朝丹",
          address: "GZ-A3-A3B2",
        },{
          key: "7",
          school: "本部高中",
          Name: "A3楼地下室",
          Code: 323472,
          people: "张俊",
          address: "GZ-A3-A3B2",
        },
        {
          key: "8",
          school: "本部初中",
          Name: "信息中心",
          Code: 422452,
          people: "陈岐",
          address: "GZ-A3-A3B2",
        },
        {
          key: "9",
          school: "本部初中",
          Name: "库房",
          Code: 321124,
          people: "熊朝丹",
          address: "GZ-A3-A3B2",
        },{
          key: "10",
          school: "本部高中",
          Name: "A3楼地下室",
          Code: 323472,
          people: "张俊",
          address: "GZ-A3-A3B2",
        },
        {
          key: "11",
          school: "本部初中",
          Name: "信息中心",
          Code: 422452,
          people: "陈岐",
          address: "GZ-A3-A3B2",
        },
        {
          key: "12",
          school: "本部初中",
          Name: "库房",
          Code: 321124,
          people: "熊朝丹",
          address: "GZ-A3-A3B2",
        },
      ],
      count: 12,
    };
  }

  handleDelete = (key) => {
    const dataSource = [...this.state.dataSource];
    this.setState({
      dataSource: dataSource.filter((item) => item.key !== key),
    });
  };
  handleAdd = () => {
    const { count, dataSource } = this.state;
    const newData = {
      key: count + 1,
      school: "本部初中",
      Name: "库房",
      Code: 321124,
      people: "姚珂",
      address: "GZ-A3-A3B2",
    };
    this.setState({
      dataSource: [...dataSource, newData],
      count: count + 1,
    });
  };
  handleSave = (row) => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex((item) => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, { ...item, ...row });
    this.setState({
      dataSource: newData,
    });
  };
  // 对话框
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = () => {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 1000);
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };
  // componentDidMount(){
  //   // 在这里发送每个页面获取数据的请求
  //   // this.props.setSwiperData()
  // }
  render() {
    const { visible, loading } = this.state;
    const menu = (
      <Menu>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
            全部学校
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
            全部高中
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
            本部初中
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
            北京分校
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
            上海分校
          </a>
        </Menu.Item>
      </Menu>
    );
    const menus = (
      <Menu>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
          教学楼办公室
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
          综合楼1层地下室
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
          综合楼信息中心
          </a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" rel="noopener noreferrer">
          综合楼总务处
          </a>
        </Menu.Item>
      </Menu>
    );
    const { dataSource } = this.state;
    const components = {
      body: {
        row: EditableRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: (record) => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave,
        }),
      };
    });

    return (
      <Container>
          <div className='header'>
            <div className="left">
              <Button type="primary" onClick={this.showModal}>
                仓库档案
              </Button>
              <Modal
                visible={visible}
                title="Title"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                footer={[
                  <Button key="back" onClick={this.handleCancel}>
                   取消
                  </Button>,
                  <Button
                    key="submit"
                    type="primary"
                    loading={loading}
                    onClick={this.handleOk}
                  >
                    确认
                  </Button>,
                ]}
              >
                <div>
                  <div>
                    所属校区:
                  <p>
                  <Dropdown overlay={menu} placement="bottomCenter" arrow='true'>
                    <Button>请选择学校</Button>
                  </Dropdown>
                  </p>
                  </div>
                  <p>仓库名称: <Input placeholder="请输入仓库名称" /></p>
                  <p>仓库编码: <Input placeholder="请输入仓库编码"/></p>
                  <p>负责人: <Input placeholder="请输入本仓负责人"/></p>
                  <div>仓库地址:
                  <p>
                  <Dropdown overlay={menus} placement="bottomCenter" arrow>
                    <Button>请选择仓库地址</Button>
                  </Dropdown>
                  </p>
                  </div>
                </div>
              </Modal>
            </div>
            <ul className="right">
              <li>
                <Dropdown overlay={menu} placement="bottomCenter" arrow>
                  <Button>全部学校</Button>
                </Dropdown>
              </li>
              <li>
                <Input placeholder="仓库名称" style={{ width: 150 }} />
              </li>
              <li>
                <Input placeholder="负责人" style={{ width: 150 }} />
              </li>
              <li>
                <Button type="primary">查询</Button>
              </li>
              <li>
                <Button
                  onClick={this.handleAdd}
                  type="primary"
                  style={{
                    marginBottom: 16,
                  }}
                >
                  增加
                </Button>
              </li>
            </ul>
          </div>
            <div className="main">
              <div className='last'>
                <Table
                  components={components}
                  rowClassName={() => 'editable-row'}
                  bordered
                  dataSource={dataSource}
                  columns={columns}
                />
              </div>
            </div>
      </Container>
    );
  }
}
export default index;
